<template>
  <div class="ProductHead">
    <NavBar
      title="产品展示"
      left-text="首页"
      right-text="分类"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <ProductSort
      :treeData="treeData"
      @clickSort="clickSort"
      ref="productSort" ></ProductSort>
  </div>
</template>

<script>
import { NavBar } from 'vant'
import ProductSort from './ProductSort'
export default {
  name: 'ProductHead',
  components: {
    NavBar,
    ProductSort
  },
  data () {
    return {

    }
  },
  props: {
    treeData: {
      type: Array
    }
  },
  created () {},
  mounted () {},
  methods: {
    onClickLeft () {
      this.$router.push('/mobileIndex')
    },
    onClickRight () {
      this.$refs.productSort.showPop()
    },
    clickSort (data) {
      this.$emit('clickSort', data)
    }
  }
}
</script>

<style scoped lang="scss">
  .ProductHead {

  }
</style>
